﻿<!doctype html>
<html>
    <head>
    <title>SpreadJS - Customize Sparkline</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /*css_begin*/
        input[type="button"] {
            width: 80px;
            margin-right: 20px;
            margin-left: 20px;
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var sheet = spread.getSheet(0);
            sheet.isPaintSuspended(true);

            sheet.allowCellOverflow(true);

            sheet.setValue(0, 0, "Data Range is A2-A9");
            sheet.setValue(1, 0, 1);
            sheet.setValue(2, 0, -2);
            sheet.setValue(3, 0, -1);
            sheet.setValue(4, 0, 6);
            sheet.setValue(5, 0, 4);
            sheet.setValue(6, 0, -4);
            sheet.setValue(7, 0, 3);
            sheet.setValue(8, 0, 8);

            sheet.setValue(0, 1, "Data Range is A2-A9");
            sheet.setValue(1, 1, 1);
            sheet.setValue(2, 1, 3);
            sheet.setValue(3, 1, -1);
            sheet.setValue(4, 1, 6);
            sheet.setValue(5, 1, -4);
            sheet.setValue(6, 1, 4);
            sheet.setValue(7, 1, -2);
            sheet.setValue(8, 1, 8);

            sheet.setValue(0, 3, "Date axis range is C2-C9");
            sheet.setValue(1, 3, new Date(2011, 0, 5));
            sheet.setValue(2, 3, new Date(2011, 0, 1));
            sheet.setValue(3, 3, new Date(2011, 1, 11));
            sheet.setValue(4, 3, new Date(2011, 2, 1));
            sheet.setValue(5, 3, new Date(2011, 1, 1));
            sheet.setValue(6, 3, new Date(2011, 1, 3));
            sheet.setValue(7, 3, new Date(2011, 2, 6));
            sheet.setValue(8, 3, new Date(2011, 1, 19));

            var data = new spreadNS.Range(1, 0, 8, 1);
            var dateAxis = new spreadNS.Range(1, 3, 8, 1);

            sheet.getCell(9, 0).text("Sparkline with dateAxis:");

            sheet.getCell(10, 0).text("(1) Line");
            sheet.getCell(10, 3).text("(2)Column");
            sheet.getCell(10, 6).text("(3)Winloss");

            //line
            sheet.addSpan(11, 0, 4, 3);
            var setting = new spreadNS.SparklineSetting();
            setting.showMarkers(true);
            setting.displayXAxis = true;
            setting.showFirst(true);
            setting.showLast(true);
            setting.showLow(true);
            setting.showHigh(true);
            setting.showNegative(true);
            sheet.setSparkline(11, 0, data
                    , spreadNS.DataOrientation.Vertical
                    , spreadNS.SparklineType.line
                    , setting
                    , dateAxis
                    , spreadNS.DataOrientation.Vertical
            );

            //column
            sheet.addSpan(11, 3, 4, 3);
            setting = new spreadNS.SparklineSetting();
            setting.displayXAxis = true;
            setting.showFirst(true);
            setting.showLast(true);
            setting.showLow(true);
            setting.showHigh(true);
            setting.showNegative(true);
            sheet.setSparkline(11, 3, data
                    , spreadNS.DataOrientation.Vertical
                    , spreadNS.SparklineType.column
                    , setting
                    , dateAxis
                    , spreadNS.DataOrientation.Vertical
            );

            //winloss
            sheet.addSpan(11, 6, 4, 3);
            setting = new spreadNS.SparklineSetting();
            setting.displayXAxis = true;
            setting.showNegative(true);
            sheet.setSparkline(11, 6, data
                    , spreadNS.DataOrientation.Vertical
                    , spreadNS.SparklineType.winloss
                    , setting
                    , dateAxis
                    , spreadNS.DataOrientation.Vertical
            );

            sheet.isPaintSuspended(false);

            function getActualRange(range, maxRowCount, maxColCount) {
                var row = range.row < 0 ? 0 : range.row;
                var col = range.col < 0 ? 0 : range.col;
                var rowCount = range.rowCount < 0 ? maxRowCount : range.rowCount;
                var colCount = range.colCount < 0 ? maxColCount : range.colCount;

                return new spreadNS.Range(row, col, rowCount, colCount);
            }

            $("#btngetSetting").click(function () {
                var sheet = spread.getActiveSheet();

                sheet.isPaintSuspended(true);
                var sels = sheet.getSelections();
                var sparkline;

                for (var n = 0; n < sels.length; n++) {
                    if (sels) {
                        var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
                        var rowCount = sel.rowCount;
                        var colCount = sel.colCount;
                        for (var i = 0; i < rowCount; i++) {
                            for (var j = 0; j < colCount; j++) {
                                sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
                                if (sparkline != null) {
                                    getSparklineSettings(sparkline.setting());
                                }
                            }
                        }
                    }
                }
                sheet.isPaintSuspended(false);
            });

            $("#btnGroupSparkline").click(function () {
                var sheet = spread.getActiveSheet();

                sheet.isPaintSuspended(true);
                var sels = sheet.getSelections();
                var i = 0;
                var sparklines = [];
                for (var n = 0; n < sels.length; n++) {
                    if (sels) {
                        var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
                        var rowCount = sel.rowCount;
                        var colCount = sel.colCount;
                        for (var i = 0; i < rowCount; i++) {
                            for (var j = 0; j < colCount; j++) {
                                var sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
                                if (sparkline != null) {
                                    sparklines.push(sparkline);
                                }
                            }
                        }
                        sheet.groupSparkline(sparklines);
                    }
                }

                sheet.isPaintSuspended(false);
            });

            $("#btnUnGroupSparkline").click(function () {
                var sheet = spread.getActiveSheet();

                sheet.isPaintSuspended(true);
                var sels = sheet.getSelections();
                var sparkline;
                for (var n = 0; n < sels.length; n++) {
                    if (sels) {
                        var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
                        var rowCount = sel.rowCount;
                        var colCount = sel.colCount;
                        for (var i = 0; i < rowCount; i++) {
                            for (var j = 0; j < colCount; j++) {
                                sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
                                if (sparkline != null) {
                                    sheet.ungroupSparkline(sparkline.group);
                                }
                            }
                        }
                    }
                }
                sheet.isPaintSuspended(false);
            });

            $("#sparikinetype").change(function () {
                var sheet = spread.getActiveSheet();

                sheet.isPaintSuspended(true);
                var sels = sheet.getSelections();
                var sparkline;
                for (var n = 0; n < sels.length; n++) {
                    if (sels) {
                        var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
                        var rowCount = sel.rowCount;
                        var colCount = sel.colCount;
                        for (var i = 0; i < rowCount; i++) {
                            for (var j = 0; j < colCount; j++) {
                                sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
                                if (sparkline != null) {
                                    sparkline.sparklineType(parseInt($(this).val()));
                                }
                            }
                        }
                    }
                }
                sheet.isPaintSuspended(false);
            });

            $("#displayDateAxis").change(function () {
                var sheet = spread.getActiveSheet();

                sheet.isPaintSuspended(true);
                var sels = sheet.getSelections();
                var sparkline;
                for (var n = 0; n < sels.length; n++) {
                    if (sels) {
                        var sel = getActualRange(sels[0], sheet.getRowCount(), sheet.getColumnCount());
                        var rowCount = sel.rowCount;
                        var colCount = sel.colCount;
                        for (var i = 0; i < rowCount; i++) {
                            for (var j = 0; j < colCount; j++) {
                                sparkline = sheet.getSparkline(sel.row + i, sel.col + j);
                                if (sparkline != null) {
                                    sparkline.displayDateAxis($(this).prop("checked"));
                                }
                            }
                        }
                    }
                }
                sheet.isPaintSuspended(false);
            });
        };
        /*code_end*/
    </script>

    </head>
    <body>
    <div class="sample-turtorial">
        <div id="ss" style="width:100%; height:360px;border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label for="sparikinetype">Type:</label>
                <select id="sparikinetype">
                    <option value="0">line</option>
                    <option value="1">column</option>
                    <option value="2">winloss</option>
                </select>
                <input type="checkbox" id="displayDateAxis" checked style="margin-left:20px;"/>
                <label for="displayDateAxis">displayDateAxis</label>
            </div>
            <div class="option-row">
                <input id='btnGroupSparkline' type='button' value='Group' style="display: inline-block; width: 80px;"/>
                <input id='btnUnGroupSparkline' type='button' value='UnGroup' style="display: inline-block; width: 80px;"/>
            </div>
        </div>
    </div>
    </body>
</html>
